Overview of the FlashAir App Development for Web Browser

Latest update: July 2013

A web browser on your PC or smartphone connected to a FlashAir is available to view contents on it. The screen shown in the browser is generated by a program called Browser Utility by using FlashAir API. In this tutorial, we will show you how to create your own Browser Utility.

About Browser Utility

Browser Utility is a screen to see FlashAir contents through a web browser. This consists of HTML, CSS and JavaScript files.

Creating your own Browser Utility allows to control a visual design of the Browser Utility or add special functions such as image processing.

In this tutorial, we will show you how to create your own Browser Utility.

Please see also API Guide | Browser Utility for further information.

Preparation

1. Preparing Development Tools

Writing HTML, JavaScript and CSS and checking them via a Web Browser are major items for a Browser Utility development. What all you need are a good text editor and a web browser. It doesn't need any other special software.

In this tutorial, we will use jQuery and Bootstrap , popular libraries for web content development. More information can be found on the site of those libraries.

Firefox's web development tool is very helpful to see how JavaScript works. It is a good idea to a PC connected to a FlashAir via Wireless LAN in development phase.

To run a created program, you need to copy the program to your FlashAir card through a PC which has a SD card slot (called a SD host device). You will do it frequently so it will be helpful to use a same device for editing and writing a program.

Note: In the iOS or Android app development, you need to install the created program on a iOS or Android device if you want to test it. In the Browser Utility develpment, however, you need to copy the created program on a FlashAir card. It is because a Browser Utility program will be copied through a network before it runs on a web browser.

2. Get the FlashAir Device

In order to make the applications in the tutorial, you will need a FlashAir device. It can be purchased both online and at electronics stores.

3. Backup your Files

Backup your FlashAir files to the '/SD_WLAN/' directory. This way you can restore its original condition at any time.

There are hidden attributes attached to this directory, therefore we will use tools to handle this hidden folder.

4. Supplemental Information for Quicker Developments

Station Mode

It is not possible to access the internet through Wireless LAN when connected to the FlashAir device, which can be a bit inconvenient.
We suggest that you use one of the following methods to address this issue and make your FlashAir development more efficient and convenient:
It is possible to access intranet if the FlashAir is set to Station Mode. This mode is useful during development since it allows you to also access the Internet. Please refer to Advanced Tutorial #1: Station Mode for more details.

Longer Timeout

FlashAir stop its Wireless LAN functionality to save the power consumption if no communication through Wireless LAN for some while. It is usual case in development phase. You can change the timeout length to stop Wireless LAN.
Please refer to CONFIG Reference: Set connection time-out period for more details.

Prior Knowledge Required

Communication with the FlashAir is done via CGI commands using HTTP communication. Therefore, you only need to understand the behavior of CGI commands and how to communicate via HTTP in order to create a simple browser template.

However, we do recommend that you be familiar with HTML / CSS / Javascript for the other portions of your app design.

In each tutorial, we will create a simple template for an app and describe the behavior of each CGI command used.

After completing the tutorial, you will be prepared to make web apps for your FlashAir Device. More app development and unique applications of the FlashAir are highly encouraged!